<template>
	<view class="page">
		<view style="height: fit-content;">
			<view class="top">
				<!-- 顶部背景图 -->
				<view class="top_bg" >
					<swiper  :autoplay="true" :interval="5000" :duration="1000" class="swiper ">
						<swiper-item @click="clickFn(item.id)" v-for="(item,index) in swiperList" :key="index">
							<view class="swiper" >
								<image class="swiper" :src="item.image" ></image>
							</view>
						</swiper-item>
					</swiper>
		
				</view>
				
				
				<!-- 顶部卡片 -->
				<view class="top_card">
					<view class="capsule">
						<image src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF"/>
						<text>学习环境</text>
					</view>
					<view class="imgs">
						<image v-for="(item, index) in top_card_imgs" :src="item" :key="index" class="item"/>
					</view>
				</view>
			</view>
		</view>
		<view class="menus">
			<!-- 成功案例 -->
			<view class="menu-item" @click="toDetails(item.id)" v-for="(item, index) in catalog" :key="item.id" :style="{background: `url('${bg[index]}') 100% 100% no-repeat`}">
				<view class="left">
					<view class="title">{{item.name}}〉〉</view>
					<view class="desc">{{item.info}}</view>
				</view>
				<view class="menu-btn">立即查看</view>
			</view>
		</view>
		
		<view class="more" @click="toList">
			<view class="left">
				<view>立即报名</view>
				<view>点击查看联系我们 〉〉</view>
				<view>点我报名</view>
			</view>
			<image class="right_bg" src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF"/>
			<view class="dot">
				<view class="bot-item"></view>
				<view class="bot-item"></view>
				<view class="bot-item"></view>
			</view>
		</view>
		
	</view>
</template>

<script setup>
	import {computed, ref} from 'vue'
	
	import {
		goodstype,recommendGoods
	} from '../../api/goods';
	import {
		getImage,
	} from '/api/common.js';
	//封面
	async function getImageList() {
		let res = await getImage({
			type:0,
			page:1
		})
		top_card_imgs.value=res.data.data.map((item)=>item.images)
	}
	getImageList()
	const catalog=ref()
	//顶部背景图
	
	const swiperList=ref([])
	
	const clickFn=(id)=>{
		uni.navigateTo({
			url: '/pages/schoolDetail/schoolDetail?id='+id
		})
	}
	

	// 学习环境三张图片
	const top_card_imgs = ref()

	
	//跳转升学成功案例页面
	const toDetails = id => {
		// uni.navigateTo({
		// 	url: '/pages/successCases/successCases?id='+id
		// })
	uni.navigateTo({
		url: '/pages/list/list?id='+id
	})
		
	}
	const bg=['https://t7.baidu.com/it/u=4037993762,1028356359&fm=193&f=GIF','https://t7.baidu.com/it/u=4037993762,1028356359&fm=193&f=GIF','https://t7.baidu.com/it/u=4037993762,1028356359&fm=193&f=GIF','https://t7.baidu.com/it/u=4037993762,1028356359&fm=193&f=GIF']
	
	
	//跳转升学商品列表页
	const toList = ()=> {
		uni.navigateTo({
			url: '/pages/list/list'
		})
	}
	//获取目录
	const getCatalogList = async () => {
		const res = await goodstype()
		let arr = res.data.data.map((item) => {
			return {
				id: item.id,
				name: item.name,
				info: item.info,
			}
		})
		catalog.value = arr.splice(0,4)
	}
	getCatalogList();
	
	//推荐商品轮播
	const recommendGoodsFn=async ()=>{
		let res = await recommendGoods()
		let arr=res.data.data.filter((item)=>{
			return !!item.icon 
		})
		swiperList.value = arr.map((item) => {
			return  {image:item.icon.split(',')[0],id:item.id}
		})
	}
	recommendGoodsFn()
</script>

<style lang="scss" scoped>
.page{
	background: #F2F2F2;
	min-height: 100vh;
	padding-bottom: 30rpx;
}
.top{
	width: 100vw;
	.top_bg{
		height: 75vh;
		image {
			width: 100%;
			height: 100%;
			z-index: 10;
		}
		.swiper {
			width: 100%;
			height: 100%;
		}
		
	}
	.top_card{
		background: #D2DDF3;
		height: 260rpx;
		position: relative;
		top: -10rpx;
		margin: -30rpx 4rpx 0 4rpx;
		border-radius: 24rpx;
		padding-top: 10rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		.capsule{
			image{
				height: 35rpx;
				width: 35rpx;
				margin-right: 10rpx;
			}
			text{
				font-weight: bold;
				color: #5584D0;
				letter-spacing: 6rpx;
			}
			height: 50rpx;
			padding: 0 30rpx;
			background: #fff;
			border-radius: 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;
			margin: 0 auto;
		}
		.imgs{
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			.item{
				width: 32%;
				height: 192rpx;
			}
		}
	}
}

.menus{
	padding: 0 22rpx;
	.menu-item{
		height: 180rpx;
		border-radius: 24rpx;
		overflow: hidden;
		margin-top: 20rpx;
		display: flex;
		align-items: center;
		padding-left: 30rpx;
		
		&:nth-child(odd){
			.left{
				.title, .desc{
					color: #fff;
				}
			}
		}
		&:nth-child(even){
			.left{
				.title, .desc{
					color: #333333;
				}
			}
		}
		
		
		.left{
			display: flex;
			flex-direction: column;
			justify-content: center;
			box-sizing: content-box;
			.title{
				width: 430rpx;
				letter-spacing: 4rpx;
				font-weight: bold;
				margin-bottom: 8rpx;
			}
			.desc{
				width: 430rpx;
				font-size: 18rpx;
			}
		}
		.menu-btn{
			font-size: 26rpx;
			height: 45rpx;
			width: 150rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #fff;
			color: #5785D1;
			font-size: 24rpx;
			font-weight: bold;
			border-radius: 24rpx;
		}
	}
}
.more{
	background: #fff;
	border-radius: 24rpx;
	padding-left: 30rpx;
	height: 280rpx;
	margin: 0 22rpx;
	margin-top: 30rpx;
	display: flex;
	justify-content: space-between;
	overflow: hidden;
	position: relative;
	.left{
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		view{
			&:nth-child(1){
				font-size: 36rpx;
				font-weight: bold;
			}
			&:nth-child(2){
				font-size: 26rpx;
				font-weight: bold;
				margin: 16rpx 0;
			}
			&:nth-child(3){
				width: fit-content;
				background: rgb(87,140, 264);
				font-size: 20rpx;
				padding: 8rpx 20rpx;
				border-radius: 20rpx;
				color: #fff;
			}
		}
	}
	.right_bg{
		height: 280rpx;
		width: 280rpx;
	}
	.dot{
		position: absolute;
		bottom: 0;
		left: 40%;
		display: flex;
		.bot-item{
			background: rgb(88,141, 246);
			width: 30rpx;
			height: 4rpx;
			margin: 0 6rpx 10rpx 6rpx;
		}
	}
}
</style>
